<template>
    <div>
        <el-card shadow="never">
            <div class="panel-header">
                <el-col span="20">
                    <div class="title">
                        <span class="stu-name">{{ user.name }}</span>
                    </div>
                    <div class="secondary-text">
                        <span class="text-light-gray">{{$t('courses.applicationNo')}}</span>
                        {{ rollInfo.no }}
                    </div>
                </el-col>
                <el-col span="4">
                    <el-button  v-if="showBack" class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
                </el-col>
            </div>
            <el-row>
                <el-col :span="8">
                    <span class="text-light-gray">{{$t('courseSummary.applicant')}}：{{user.name}}</span>
                </el-col>
                <el-col :span="8">
                    <span class="text-light-gray">{{$t('courses.code')}}：{{user.code||user.userId}}</span>
                </el-col>
                <el-col :span="8">
                    <span class="text-light-gray">{{$t('label.college')}}：{{user.department}}</span>
                </el-col>
            </el-row>
        </el-card>
        <el-card shadow="never" id="for-major">
            <div class="detail-title">申请明细及审批</div>
            <el-form
                :model="courseForm"
                label-position="right"
                label-width="120px"
                label-suffix="："
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.college')}}：
                            </span>
                            <el-select
                                v-model="courseForm.college"
                                :disabled="true"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.college"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('label.trainingLevel')}}：
                            </span>
                            <el-select
                                v-model="courseForm.trainingLevel"
                                :disabled="true"
                                style="width:100%;"
                            >
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.courseName')}}：
                            </span>
                            <el-input v-model="courseForm.name" :disabled="true" type="text" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.score')}}：
                            </span>
                            <el-input :disabled="true" v-model="courseForm.credits" type="text" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.courseNameEn')}}：
                            </span>
                            <el-input :disabled="true" v-model="courseForm.nameEn" type="text" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.term')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.term"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.term"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.scoreType')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.scoreType"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.scoreType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('courses.classHour')}}：
                            </span>
                            <el-input :disabled="true" v-model="courseForm.period" type="text" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.courseProperty')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.nature"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.nature"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.courseCategory')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.label"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in courseCategories"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.formLearning')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.formLearning"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.formLearning"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.teachingLanguage')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.teachingLanguage"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.teachingLanguage"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.teachMode')}}：
                            </span>
                            <el-input :disabled="true" v-model="courseForm.teachModeI18n" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('course.precourse')">
                            <el-tooltip
                                class="item"
                                effect="light"
                                :content="courseForm.precourse"
                                placement="top-start"
                                :disabled="getDisabledVal(false,courseForm.precourse)"
                            >
                                <el-input
                                    :disabled="true"
                                    v-model="courseForm.precourse"
                                    type="text"
                                />
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Prerequisite">
                            <el-tooltip
                                class="item"
                                effect="light"
                                :content="courseForm.precourseEn"
                                placement="top-start"
                                :disabled="getDisabledVal(false,courseForm.precourseEn)"
                            >
                                <el-input
                                    :disabled="true"
                                    v-model="courseForm.precourseEn"
                                    type="text"
                                />
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.enabled')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.enabled"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.enabled"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.assessmentMode')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.assessmentMode"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.assessmentMode"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.headTeacherList')}}：
                            </span>
                            <TeacherSelect
                                v-model="courseForm.headTeacher"
                                :condition="headTeacherCondition"
                                :showAllTeacher="true"
                                value="code"
                                :disabled="true"
                            ></TeacherSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.crossTerm')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.crossTerm"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.crossTerm"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('适用专业')">
                            <el-tooltip
                                class="item"
                                effect="light"
                                :content="courseForm.majorTextI18n"
                                placement="top-start"
                                :disabled="getDisabledVal(false,courseForm.majorTextI18n)"
                            >
                                <el-select
                                    :disabled="true"
                                    v-model="courseForm.majorList"
                                    style="width: 100%;height:33px"
                                    multiple="true"
                                    collapse-tags
                                >
                                    <el-option
                                        v-for="item in options.majorList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('是否跨院系课程')}}：
                            </span>
                            <el-select
                                :disabled="true"
                                v-model="courseForm.crossCollege"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.crossTerm"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item :label="$t('course.teachersList')">
                            <el-input :disabled="true" v-model="teacherLabels" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.introductionCourse')}}：
                            </span>
                            <el-input
                                :disabled="true"
                                v-model="courseForm.introductionCourse"
                                type="textarea"
                                rows="3"
                                style="width:80%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <span slot="label">
                                <b class="require">*</b>
                                {{$t('course.engIntroductionCourse')}}：
                            </span>
                            <el-input
                                :disabled="true"
                                v-model="courseForm.engIntroductionCourse"
                                type="textarea"
                                rows="3"
                                style="width:80%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item :label="$t('course.schedule')">
                            <el-input
                                :disabled="true"
                                v-model="courseForm.schedule"
                                type="textarea"
                                rows="3"
                                style="width: 80%;"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item :label="$t('course.scheduleEn')">
                            <el-input
                                :disabled="true"
                                v-model="courseForm.scheduleEn"
                                type="textarea"
                                rows="3"
                                style="width: 80%;"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item :label="$t('course.teacherTermInfo')">
                            <el-input
                                :disabled="true"
                                v-model="courseForm.teacherTermInfo"
                                type="textarea"
                                rows="3"
                                style="width: 80%;"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item :label="$t('message.remark')">
                            <el-input
                                :disabled="true"
                                type="textarea"
                                rows="3"
                                v-model="courseForm.remark"
                                style="width: 80%;"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-form
                v-if="!isReadOnly"
                :model="approveForm"
                label-position="right"
                label-width="120px"
                label-suffix="："
                ref="approveForm"
                :rules="approveRules"
            >
                <el-row v-if="global.isAdmin&&rollInfo.result=='Process'&&rollInfo.listApproveHistory.length===3">
                    <el-col :span="6">
                        <el-form-item :label="$t('label.courseCode')" prop="courseCode">
                            <el-input
                                :disabled="true"
                                type="text"
                                v-model="approveForm.courseCode"
                                style="width:100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" size="small" @click="checkCourseCode">自动分配</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('courses.instructions')" prop="content">
                            <el-input
                                type="textarea"
                                rows="3"
                                :placeholder="$t('message.plsInput')"
                                v-model="approveForm.content"
                                style="width:100%;"
                                maxlength="500"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <span style="color:#c0c0c0;margin-left:5px">(限长500个字)</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('courses.evidence')">
                            <el-upload
                                ref="approveUpload"
                                :headers="{'X-Token': $store.state.session.sessionid}"
                                :data="{bucketname: 'face', folderpath: 'file'}"
                                :on-remove="handleAvatarRemove"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :disabled="rollInfo.result != 'Process'"
                                class="upload-demo"
                                action="/api/commonservice/obsfile/uploadfile"
                                multiple
                            >
                                <el-button
                                    :disabled="rollInfo.result != 'Process'"
                                    size="small"
                                    type="primary"
                                >{{$t('courses.clickUpload')}}</el-button>
                                <div slot="tip" class="el-upload__tip">{{$t('文件大小不超过10M')}}</div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="float-right">
                    <el-button
                        @click="handleReject"
                        type="danger"
                        :disabled="rollInfo.result != 'Process'"
                    >{{$t('message.reject')}}</el-button>
                    <el-button
                        @click="handlePass"
                        type="primary"
                        :disabled="rollInfo.result != 'Process'"
                    >{{$t('message.pass')}}</el-button>
                </el-row>
            </el-form>
            <div style="margin-top: 24px">
                <div
                    class="edu-page-title"
                    style="font-size: 20px; margin-bottom: 32px;"
                >{{$t('courses.approvalProgress')}}</div>
                <el-table :data="rollInfo.listApproveHistory" stripe style="width: 100%">
                    <el-table-column
                        type="index"
                        prop="index"
                        :label="$t('message.order')"
                        width="80"
                    />
                    <el-table-column prop="time" :label="$t('message.time')" width="160">
                        <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="approvorName"
                        :label="$t('courses.approver')"
                        width="120"
                    />
                    <el-table-column
                        prop="role"
                        :label="$t('arrangement.assistDataCfg.role')"
                        width="120"
                    />
                    <el-table-column :label="$t('courses.approvalResult')" width="120">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.result == 'COMMIT'">{{$t('message.submit')}}</el-tag>
                            <el-tag
                                v-if="scope.row.result == 'Process'"
                                type="success"
                            >{{$t('message.pass')}}</el-tag>
                            <el-tag
                                v-if="scope.row.result == 'End'"
                                type="info"
                            >{{$t('courses.ended')}}</el-tag>
                            <el-tag
                                v-if="scope.row.result == 'Reject'"
                                type="warning"
                            >{{$t('message.reject')}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" :label="$t('courses.instructions')" />
                    <el-table-column prop="fileInfo" :label="$t('courses.applyMaterials')">
                        <template slot-scope="scope">
                            <div v-if="scope.row.fileInfo">
                                <el-button
                                    v-for="item in scope.row.fileInfo.approveAttachment"
                                    :key="item"
                                    type="text"
                                    @click="handleGetFile(item)"
                                >{{ item }}</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import { selectApproFlow, approvalThrough, approvalReject } from 'common/src/api/approval'
import { findUserInfoByIdType, findLocalUserById } from 'common/src/api/user'
import { downloadfile } from 'common/src/api/upload'

import UTILS from 'common/src/utils/utils'
import { findTeacherBycode, findTeacherList } from 'common/src/api/resource/teachers'
import { getCourseById, checkCourseById } from 'common/src/api/resource/course'
import { autoCode } from 'common/src/api/courseTemplate'
import filters from 'common/src/filters'
import mixin from 'common/src/mixins/index';
export default {
    name: 'CourseApproveDetail',
    mixins: [mixin],
    components: {},   
    props:{
        approveId:String,
        courseId:[String,Number],
        options:null,
        isReadOnly:Boolean,
        showBack:{
            type:Boolean,
            default:true
        },
        waitToDo:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            rollInfo: [],
            user: {},
            id: '',
            approvalInfo: {
                no: '',
                content: '',
                oaNo: '',
                approveAttachment: [],
                remark: null
            },
            options: {
                college: [],
                teachModeList: []
            },
            content: null,
            time: '',
            courseForm: {
                college: null,
                trainingLevel: null,
                name: null,
                credits: null,
                nameEn: null,
                term: null,
                scoreType: null,
                period: null,
                nature: null,
                label: null,
                formLearning: null,
                teachingLanguage: null,
                teachModeList: [],
                precourse: null,
                precourseEn: null,
                enabled: null,
                assessmentMode: null,
                headTeacher: null,
                crossTerm: null,
                majorList: [],
                crossCollege: null,
                teachersList: [],
                introductionCourse: null,
                engIntroductionCourse: null,
                schedule: null,
                scheduleEn: null,
                remark: null,
                majorTextI18n: null,
                teachModeI18n: null,
                teacherTermInfo:null
            },
            approveForm: {
                content: null,
                courseCode: null
            },
            approveRules: {
                courseCode: [
                    {
                        validator: this.validateCourseCode,
                        trigger: 'change'
                    }
                ],
                content: [
                    {
                        validator: this.validateContent,
                        trigger: 'change'
                    }
                ]
            },
            course: null,
            courseCategories: [],
            isPass: true,
            teachersListCondition: null,
            headTeacherCondition: null,
            teacherLabels: null
        }
    },
    filters: {
        formatDate(date) {
            return filters.formatDate(date, 'yyyy/MM/dd hh:mm:ss')
        }
    },
    mounted() {
        if (this.approveId) {
            this.initPage(this.approveId)
        } else {
            this.back()
        }
    },
    methods: {
        ...mapActions(['delTab']),
        _init_(user) {
            const query = 'userId=' + user.uid + '&type=' + user.type
            findUserInfoByIdType(query).then(res => {
                if (res.code === 200 && res.data) {
                    res.data.userType = user.type
                    this.user = res.data
                    //user info
                    this.user.department = res.data.facultyI18n
                }
            })
        },
        _initLocalUser(uid) {
            findLocalUserById('userId=' + uid).then(res => {
                if (res.code === 200 && res.data) {
                    this.user = res.data
                    this.user.name = res.data.userName
                    this.user.userId = res.data.userId
                    //user info
                    this.user.department = res.data.deptName
                }
            })
        },
        async initPage(id) {
            await selectApproFlow(id).then(res => {
                if (res && res.data) {
                    //课程审批，userType只存在老师1和本地用户3，不存在学生2
                    const _user = {
                        uid: res.data.applicantId,
                        type: res.data.userType
                    }
                    if (res.data.userType === '3') {
                        this._initLocalUser(_user.uid)
                    } else {
                        this._init_(_user)
                    }
                    this.approvalInfo.no = res.data.no
                    res.data.content = JSON.parse(res.data.content)
                    this.content = res.data.content
                    this.time = res.data.time
                    _.forEach(res.data.listApproveHistory, function(item) {
                        item.fileInfo = JSON.parse(item.fileInfo)
                    })
                    this.rollInfo = res.data
                    if (res.data.result === 'End') {
                        this.rollInfo.listApproveHistory[
                            this.rollInfo.listApproveHistory.length - 1
                        ].content = null
                    }                   
                }
            })           
            //获取课程信息
            getCourseById(this.courseId).then(response => {
                if (response.code == 200) {
                    if(this.waitToDo){
                       this.options.college=[{
                           label:response.data.collegeI18n,
                           value:response.data.college
                       }]
                       this.options.trainingLevel=[{
                           label:response.data.trainingLevelI18n,
                           value:response.data.trainingLevel
                       }]
                       this.options.term=[{
                           label:response.data.termI18n,
                           value:response.data.term
                       }]
                       this.options.scoreType=[{
                           label:response.data.scoreTypeI18n,
                           value:response.data.scoreType
                       }]
                       this.options.nature=[{
                           label:response.data.natureI18n,
                           value:response.data.nature
                       }]
                       this.options.label=[{
                           label:response.data.labelI18n,
                           value:response.data.label
                       }]
                       this.options.formLearning=[{
                           label:response.data.formLearningI18n,
                           value:response.data.formLearning
                       }]
                       this.options.teachingLanguage=[{
                           label:response.data.teachingLanguageI18n,
                           value:response.data.teachingLanguage
                       }]
                       this.options.assessmentMode=[{
                           label:response.data.assessmentModeI18n,
                           value:response.data.assessmentMode
                       }]
                        this.options.enabled=[{
                           label:response.data.enabled?this.$t("message.yes"):this.$t("message.no"),
                           value:response.data.enabled
                       }]  
                       this.options.crossTerm=[{
                           label:this.$t("message.no"),
                           value:0
                       },{
                           label:this.$t("message.yes"),
                           value:1
                       }]
                       if(response.data.majorList){
                           let labels = response.data.majorTextI18n.split(',')
                           this.options.majorList = response.data.majorList.map((item,index)=>{
                               return {label:labels[index],value:item}
                           })
                       }
                    }
                    this.course = response.data
                    Object.keys(this.courseForm).forEach(key => {
                        if (response.data[key] != undefined) {
                            this.courseForm[key] = response.data[key]
                        }
                    })
                    this.changeNatureEdit(response.data.nature)
                    if (this.courseForm.headTeacher) {
                        this.headTeacherCondition = {
                            codeList: [this.courseForm.headTeacher]
                        }
                    }
                    if (this.courseForm.teachersList) {
                        this.teachersListCondition = {
                            codeList: this.courseForm.teachersList
                        }
                    }
                    if (this.courseForm.teachersList && this.courseForm.teachersList.length > 0) {
                        findTeacherList({ codeList: this.courseForm.teachersList }).then(res => {
                            if (res.code == 200 && res.data) {
                                this.teacherLabels = res.data.list
                                    .map(t => t.name + '(' + t.code + ')')
                                    .join('，')
                            }
                        })
                    }
                }                
            })           
        },
        back() {
            this.$emit('back', 'main')
        },
        changeNatureEdit(val) {
            let obj = []
            let labels = this.options.label
            labels.forEach(item => {
                if (val == '1') {
                    if (
                        item.value == '01' ||
                        item.value == '02' ||
                        item.value == '03' ||
                        item.value == '07'
                    ) {
                        obj.push({ label: item.label, value: item.value })
                    }
                } else if (val == '2') {
                    if (
                        item.value == '04' ||
                        item.value == '05' ||
                        item.value == '06' ||
                        item.value == '07'
                    ) {
                        obj.push({ label: item.label, value: item.value })
                    }
                } else {
                    if (item.value == '08' || item.value == '09') {
                        obj.push({ label: item.label, value: item.value })
                    }
                }
            })
            this.courseCategories = obj
        },
        beforeAvatarUpload(file) {
            if (!(file.size / 1024 / 1024 < 10)) {
                this.$message({
                    type: 'warning',
                    message: this.$t('文件大小不超过10M')
                })
                return false
            }
        },
        handleAvatarRemove(file, fileList) {
            if (file.status !== 'success') return
            const removeFile = file.response.data[file.name].objectkey
            _.remove(this.approvalInfo.approveAttachment, function(item) {
                return item === removeFile
            })
        },
        handleAvatarSuccess(response, file, fileList) {
            if (response && response.data) {
                this.approvalInfo.approveAttachment.push(response.data[file.name].objectkey)
            }
        },
        checkCourseCode() {
            if (this.rollInfo.content) {
                autoCode(this.course).then(response => {
                    if (response.code == 200) {
                        this.approveForm.courseCode = response.data
                    }
                })
            }
        },
        handlePass() {
            checkCourseById(this.courseId).then(res => {
                if (res.code == 200) {
                    this.isPass = true
                    this.$refs.approveForm.validate(valid => {
                        if (valid) {
                            if (this.approveForm.courseCode) {
                                this.approvalInfo.content =
                                    '{code:"' + this.approveForm.courseCode + '"}'
                            }
                            approvalThrough(this.approvalInfo).then(res => {
                                if (res.code == 200) {
                                    if(this.waitToDo){
                                        this.$router.push('/TeacherRollCheckApproved')
                                    }else{
                                        this.$emit('back', 'main')
                                    }
                                }
                            })
                        }
                    })
                }
            })
        },
        handleReject() {
            this.isPass = false
            this.$refs.approveForm.validate(valid => {
                if (valid) {
                    let data = _.cloneDeep(this.approvalInfo)
                    data.content = this.approveForm.content
                    approvalReject(data).then(res => {                        
                        if(this.waitToDo){
                            this.$router.push('/TeacherRollCheckApproved')
                        }else{
                            this.back()
                        }
                    })
                }
            })
        },
        validateCourseCode(rule, value, callback) {
            if (this.isPass && this.approveForm.courseCode == null) {
                callback(new Error('课程编码不能为空'))
            } else {
                callback()
            }
        },
        validateContent(rule, value, callback) {
            if (
                !this.isPass &&
                (this.approveForm.content == null || this.approveForm.content == '')
            ) {
                callback(new Error('审批说明必须填写'))
            } else {
                callback()
            }
        },
        handleGetFile(objectkey) {
            if (!objectkey) return
            downloadfile(objectkey)
        },
        getDisabledVal: function(disabled, val) {
            return !disabled && val != null && val != '' ? false : true
        }
    }
}
</script>
<style lang="scss" scoped>
.panel-header {
    height: 50px;
    border-bottom: 2px solid #dcdfe6;
    margin-bottom: 12px;
    cursor: default;
    .head-text {
        font-size: 14px;
        color: #000;
    }
    .title {
        font-size: 18px;
        color: #000;
        font-weight: bold;
    }
    .stu-name {
        top: -11px;
        position: relative;
    }
    .class-profiles {
        float: left;
        width: 40%;
        div {
            padding: 5px 0;
        }
    }
}
.item-group {
    float: left;
    font-size: 16px;
    label,
    .span {
        display: inline-block;
        vertical-align: top;
        line-height: 32px;
    }
    .label {
        width: 100px;
        color: #303133;
    }
    .secondary-text label {
        font-size: 16px;
    }
    .approve-tip {
        font-size: 16px;
        color: #909399;
        float: right;
        padding-top: 10px;
    }
}
b.require {
    color: red;
}
.detail-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
#for-major ::v-deep .el-select__tags > span {
    & > span:first-child {
        width: calc(100% - 60px);
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
#for-major ::v-deep .el-tooltip {
    margin: 0;
}
</style>
